<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<style>
		h1,
		h2,
		h3,
		h4,
		h5,
		h6,
		p,
		span {
			font-family: Open Sans, Seravek, Segoe UI, Verdana, PingFang SC, Hiragino Sans GB, Lantinghei SC, Microsoft Yahei, Consoles, WenQuanYi Micro Hei, sans;
		}

		html,
		body {
			transition: all 2s;
			background-color: #fff;
			height: 100%;
			margin: 0;
		}

		.heart {
			position: relative;
			width: 100px;
			height: 90px;
			opacity: 0;
			transition: all 2s;
		}

		.heart:before,
		.heart:after {
			position: absolute;
			content: "";
			left:
				50px;
			top: 0;
			content: "";
			width: 50px;
			height: 80px;
			background: #fc2e5a;
			border-radius: 50px 50px 0 0;
			transform-origin: 0 100%;
			transform: rotate(-45deg);
		}

		.heart:after {
			left: 0;
			transform-origin: 100% 100%;
			transform: rotate(45deg);
		}

		#app {
			transition: all 2s;
		}

		#chatbox {
			width: 400px;
			position: relative;
			margin-left: 20px;
		}

		#chattitle {
			position: absolute;
			padding: 5px;
			top: 0;
			left: 0;
			background-color: #66ccff;
			color: #fff;
			text-align: center;
			content: "MBot V1.0.1";
			width: 98%;
			overflow: hidden;
		}

		#mainpan {
			height: 350px;
			background-color: #fcfcfc;
			overflow: scroll;
			padding: 10px;
			width: 96%;
		}

		#mainsay {
			height: 150px;
			width: 100%;
		}

		button {
			background-color: #66ccff;
			outline: none;
			border: none;
			border-radius: 10px;
			padding: 10px 20px;
			color: #fff;
			transition: all 0.5s;
		}

		#mainbutton {
			position: absolute;
			bottom: 20px;
			right: 10px;
			z-index: 52014;
		}

		@media (max-width: 600px) {
			#chatbox {
				width: 100%;
				margin-left: 0;
			}

			#qwq {
				display: none;
			}
		}

		button:hover {
			background-color: #77ddff;
		}

		.titlesay {
			color: #aaa;
		}

		.systembox {
			text-align: center;
		}

		.systemsay {
			background-color: #aaa;
			color: #fff;
			padding: 2px 4px;
			border-radius: 5px;
		}

		.item-right {
			background: #12B7F5;
			margin-right: 10px;
			width: 200px;
			float: right;
			color: #fff;
			border-radius: 5px;
		}

		.item-left {
			background: #E5E5E5;
			margin-left: 10px;
			width: 200px;
			float: left;
			color: #000;
			border-radius: 5px;
		}

		.active {
			background-color: #e1e1e1;
			color: #000;
		}

		.info-tip {
			background: rgba(250, 60, 0, 1);
			position: absolute;
			width: 10px;
			height: 10px;
			top: 0;
			right: 0;
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			border-radius: 50%;
		}

		a {
			color: black;
		}

		a:hover {
			color: #121212;
		}

		::-webkit-scrollbar {
			width: 5px;
		}

		::-webkit-scrollbar-thumb {
			border-radius: 10px;
			-webkit-box-shadow: inset 0 0 5px #bebebe;
			background: #bebebe;
			transition: all 0.5s;
		}

		::-webkit-scrollbar-thumb:hover {
			border-radius: 10px;
			-webkit-box-shadow: inset 0 0 5px #aaaaaa;
			background: #aaaaaa;
		}

		::-webkit-scrollbar-track {
			-webkit-box-shadow: inset 0 0 5px #e0e0e0;
			border-radius: 0;
			background: #e0e0e0;
			opacity: 1;
		}
	</style>
	<script src="./vue.min.js"></script>
</head>

<body>
	<div id="app">
		<div id="chatbox" style="float:left;z-index:2000">
			<div id="chattitle">{{ botName }}</div><br>
			<div id="mainpan">
				<div v-html="mainchat"></div>
			</div>

			<div style="clear:both;"></div>
			<textarea id="mainsay"></textarea>
			<button @click="youSay()" id="mainbutton">{{ smit }}</button>
		</div>
		<div id="qwq" style="float:left;width: 400px;border:1px solid #000;margin-left:30px;padding:10px;">
			<p style="z-index:2000">
				<span style="font-size:32px">{{ programName }}{{ version }}</span>
				<hr />
				<ul>
					<li v-for="updateLog in updateLogs">{{ updateLog }}</li>
				</ul>
				<hr />
				<span style="font-size: 24px">添加词条说明</span><br>
				<span v-html="writeReadme"></span>
			</p>
		</div>
		<div style="clear: both"></div>
	</div>
	<div id="heartBoard"
		style="margin:none;display:none;position: absolute;top:0;width: 100%;height:100%;transition: all 3s">
	</div>
	<p style="position:absolute; top:-130%;color:white;z-index:20;font-size:60px;content:'233';left:20%;transition: all 3s;"
		id="gggyyy"><span id="KeyWords"></span><br>
		<button style="background-color:#FF3399;float:left" @click="wantSupport()">支持
			/ Support</button>
		<button style="background-color:#FF3399;float:right"
			onclick="app.style.opacity='1';app.style.display='';app.style.zIndex='200';gggyyy.style.display='none';">返回对话
			/ Back to chat</button>
		<div style="clear:both"></div>
	</p>
	<script src="main.js"></script>
</body>

</html>
